<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- <div class="gwc"> -->
        <!-- <div class="gwckuang" v-if="gwcliebiao.length > 0">-->
        <van-checkbox-group v-model="checked2" ref="checkboxGroup" v-if="gwcliebiao.length > 0">
            <van-swipe-cell>
                <van-checkbox :name="item.cartid" v-for='item in gwcliebiao' :key="item.proid"
                    @click="dqxzkk(item.cartid, item.flag)">
                    <!-- 商品卡片 -->
                    <van-swipe-cell>
                        <van-card :num="item.num" :price="item.originprice" :title="item.proname" :thumb="item.img1">
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger"
                                @click="scdantiaosj(item.cartid, gwcliebiao.length)" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </van-checkbox>

                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </van-checkbox-group>
        <van-empty image-size="100" description="购物车无数据" v-else />
        <!-- 底部的提交全选按钮 -->
        <van-submit-bar :price="double" button-text="提交订单" @submit="onSubmit">
            <van-checkbox @click="quanxuan" v-model="checked1">全选</van-checkbox>
        </van-submit-bar>


        <p>可能你还想要</p>
        <ul>
            <li v-for="item in gwcSwipe" @click="quxiangqing(item.proid)">
                <img :src="item.img1" alt="">
            </li>
        </ul>

    </div>
</template>

<script setup lang="ts">
import { gwcList } from '@/api/gouwuche';
import { gwclb } from '@/api/gwclb'
import { scdt } from '@/api/scdantiao'
import { onMounted, ref, type Ref, watch, computed } from 'vue';
import { gxgwc } from '@/api/gxgwc'
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import { dqxz } from '@/api/dqxz';
import { qxfx } from '@/api/qxfx'

// // 全部取消
const router = useRouter()
const userid: any = localStorage.getItem('userid')
console.log(userid);

const gwcSwipe: any = ref([])


// 复选框
const onSubmit = () => Toast('点击按钮');
const checked1: any = ref(false)
const checked2: any = ref([]);
const checkboxGroup: any = ref();
const gwcliebiao: any = ref([])



// 单选
const dqxzkk = (id: string, flag: boolean) => {
    dqxz({ cartid: id, flag: flag }).then(res => {
        console.log('单条状态', res);
        if (checked2.value.length == gwcliebiao.value.length) {
            checked1.value = true
            sum.value = 0
        }
        // else if (checked1.value = false) {
        //     checkboxGroup.value.toggleAll(false);
        // }
        else {
            checked1.value = false
            sum.value = 0
        }
    })
}


// 全选
const quanxuan = () => {
    // checkboxGroup.value.toggleAll();
    qxfx({ userid: userid, type: (checked2.value.length == gwcliebiao.value.length ? true : false) }).then((res: any) => {
        console.log('全选反选', res);
        sum.value = 0
        if (checked1.value == true) {
            checked2.value.length = gwcliebiao.value.length
            console.log(77777777777777, checked2.value.length);
            console.log(7556666666, gwcliebiao.value.length);

            checkboxGroup.value.toggleAll(true);
        }
        else if (checked1.value == false) {
            console.log(852852852, checked1.value);

            checkboxGroup.value.toggleAll(false);
            //     // checked2.value = []
            checked2.value.length = 0
        }
    })

}



const quxiangqing = (id: string) => {
    router.push({ path: '/xq', query: { id: id } })
}
// 调用购物车 列表
onMounted(() => {
    gwcList({ count: 1 }).then(res => {
        // console.log(res);
        gwcSwipe.value = res.data
    })
    gwclb({ userid }).then(res => {
        console.log('购物车列表', res);
        gwcliebiao.value = res.data
        console.log('gwcliebiao.valuexin购物车列表', gwcliebiao.value);
    })
})
// 删除购物车单条数据
const scdantiaosj = (id: string, num: number) => {
    scdt({ cartid: id }).then(res => {
        console.log(res);
    })
    // 原地刷新
    router.go(0)

    // 更新 页面
    gxgwc({ cartid: id, num: num }).then(res => {
        console.log('更新购物车数量', res);
    })
}



// 计算金钱的代码
const sum: any = ref(0)
const double: any = computed(() => {
    checked2.value.forEach((item: any) => {
        gwcliebiao.value.forEach((item1: any) => {
            if (item == item1.cartid) {
                sum.value += item1.num * item1.originprice
            }
        })
    })
    return sum.value * 100
})



</script>
<style lang="scss" scoped>
.van-card {
    width: 320px;
    height: 110px;
    position: relative;

    .van-card__footer {
        position: absolute;
        bottom: 50px;
        right: 10px;
    }
}

.gwc {


    .gwckuang {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        height: 100px;
        margin: 20px auto;
    }
}

ul {
    // width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li {
        width: 45%;
        display: flex;
        align-items: center;

        img {
            width: 150px;
            height: 200px;
        }
    }
}
</style>
